<template>
  <view>
    <view class="sear">
      <button  :class="{ 'active': isActive===4 }"  size="mini" @click="search(4)">未审批</button>
    	<button  :class="{ 'active': isActive===1 }"  size="mini" @click="search(1)">已通过</button>
      <button  :class="{ 'active': isActive===2 }"  size="mini" @click="search(2)">已退回</button>
      <button  :class="{ 'active': isActive===3 }"  size="mini" @click="search(3)">已取消</button>
    </view>
    <!-- <view class="confContent">
      <view >会议主题：{{confRes.confTitle}}</view>
      <view>会议时间：{{confRes.confDate}}</view>
      <view>负责人：&nbsp;&nbsp;&nbsp; {{confRes.nickName}}</view>
      <view>会议内容：{{confRes.confContent}}</view>   
   
    </view> -->
    <view class="card"  v-for="item in taskList" :key="item.id">
    	<uni-card  :title="confRes.confDate+' '+confRes.confTitle"  :extra="confRes.taskStat==='0'?'未读':'已读'" >	
    	<view class="uni-body">任务：{{confRes.confContent}}</view>
      <view class="uni-body">负责人：{{confRes.nickName}}</view>
      <view class="uni-body">我的反馈：{{item.feedBack? item.feedBack:'未反馈'}}</view>
      <view class="uni-body">审批状态：{{item.feedBackStat==='1'?'已通过':item.feedBackStat==='2'?'已退回':item.feedBackStat==='3'?'已取消':'未审批'}}</view>
      <view class="uni-body">审批备注：{{item.reply? item.reply:'无'}}</view>
      <view class="uni-body">
        <image v-if="item.fileImg" v-for="(i,index) in item.fileImg" :key="index" style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="scaleToFill"
         :src="i" @click="preview(item.fileImg)"></image>
      </view>
    <view class="btn">
    <button  type="warn" size="mini" @click="updateState('send',item.id)">退回</button>
    <button  type="primary" size="mini" @click="updateState('makeSure',item.id)">确认</button>
    <button  type="default" size="mini" @click="updateState('cancelFeed',item.id)">取消</button>
    </view>
    </uni-card>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
    				<uni-popup-dialog ref="inputClose"  mode="input" title="输入备注" :value="reply"
    					placeholder="若有备注请填写,没有直接点确定!" @confirm="dialogInputConfirm"></uni-popup-dialog>
    			</uni-popup>
  </view>
</template>

<script>
    import config from '@/config'
    import {
      listConference,
      getConference,
      delConference,
      addConference,
      updateConference,
      getRecord,
      getRecordName,
      updateRecord ,
      getRecordList
    } from "@/api/system/conference";
  export default {
    data() {
      return {
        // 审批状态
        feedbackStat:'4',
        // 批复备注
        reply:'',
        // 上个页面传过来的参数id
        confNo:null,
        // 默认按钮未被选中
        isActive: false ,
        // 查询反馈列表的参数
        queryParams: {
           pageNum: 1,// 初始化页码为1
           pageSize:10
           },
        totalPage: null, // 总共有多少页数据
        isLoadingMore: false, // 标记正在加载更多数据
        // 反馈列表
        taskList:[],
        // 会议详情
        confRes:{},
        type: 'center',
      }
    },
    onLoad(option){
      // console.log(option)
      this.confNo=option.id
    },
    onReady(){
      this.getFeedBackList()
      this.getConference()
    },
    methods: {
      async getFeedBackList(){
        this.queryParams.confNo=this.confNo
         const res=await getRecordList(this.queryParams)
         // console.log(res)
         this.taskList=res.rows
         this.taskList.forEach(item=>{
           if(item.fileImg){
             // console.log('有图')
             if(item.fileImg.indexOf(',')===-1){
               item.fileImg=[item.fileImg]
             }else{
                item.fileImg= item.fileImg.split(',')
             }
             item.fileImg=this.addFirst(config.baseUrl,item.fileImg)
           }
         })
         
       },
       // pre   要添加的前缀  paramsList   要加前缀的数组
       addFirst(pre, paramsList) {
         let arr = [];
         for (let i = 0; i < paramsList.length; i++) {
           arr.push(pre + paramsList[i]);
         }
         return arr;
       },
      async getConference(){
         const res = await this.$myRequest({
         url: "/system/conference/"+this.confNo,			
         })
         // console.log(res)
         this.confRes=res.data.data
       },
       search(spvalue){
          this.isActive = spvalue;
          this.queryParams.feedBackStat=spvalue
          this.getFeedBackList()
       },
       preview(imgurl){
         // console.log(imgurl)
         uni.previewImage({
         					urls: imgurl, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
         				})
       
       },
       async updateState(type,id) {
         this.$refs.inputDialog.open()
         this.recordId=id
          if(type==='send'){
            this.feedbackStat='2'
          }else if(type==='makeSure'){
            this.feedbackStat='1'
          }else{
            this.feedbackStat='3'
          }
          // console.log(spState)
          // console.log(this.reply)
         // const res= await this.$myRequest({
         //     url: "/system/record",
         //     method: 'put',
         //     data:{id:id,feedBackStat:spState}
         //     })
         //     if(res.data.code===200){
         //       uni.showToast({
         //       title: '操作成功',
         //       duration: 2000
         //     })
         //       setTimeout(() => {
         //         this.getFeedBackList()
         //       },200)
         //     }       
         },
       async  dialogInputConfirm(val) {				
         					uni.hideLoading()
         					// console.log(val)
                  // console.log(this.feedbackStat)
                  // this.reply=val
                  const res= await updateRecord({reply:val,feedBackStat:this.feedbackStat,id:this.recordId})
                  // console.log(res)
                  uni.showToast({
                  	title: '操作成功！'
                  })
                   this.getFeedBackList()
         					// 关闭窗口后，恢复默认内容
         					this.$refs.inputDialog.close()
         			},
    }
  }
</script>

<style lang="less" scoped>
  .btn{
    display: flex;
    
  }
.sear{
  margin: 20rpx auto;
  width: 95%;
  // border: 1px red solid;
  display: flex;
  justify-content: space-between;
}
/* 非选中状态 */
// .sear button {
//   background-color: #ccc; /* 按钮背景色 */
// }
 
/* 选中状态 */
.sear .active {
  background-color: #aaff7f; /* 按钮选中时的背景色 */
}
.confContent {
    width: 90%;
    margin: 10px auto;
    font-size: 13px;
    // border: 1px black solid;
    padding: 20rpx;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  }
</style>
